<script>
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import request from "@/utils/request"
import empty from "@/components/empty.vue"
import { getShowImage, handleUrlParams, showModal, showToast } from "@/utils"

export default {
  name: "article",
  components: {
    uniLoadMore,
    empty,
  },
  data() {
    return {
      loadMoreStatusText: "more",
      //资讯文章分类列表
      articleClassList: [
        {
          articlesClassId: "2", // 暂时写死校园热点分类id，以及其下级的所有文章
          articlesClassName: "所有文章",
        },
      ],
      currentArticleClassId: "2", // 当前选中的文章分类id
      list: [],
      pagination: {
        current: 1,
        size: 10,
      },
    }
  },
  created() {
    //获取资讯文章分类列表
    request({
      url: "inforArticles/listTree",
      data: {
        articlesClassParentId: "2", // 暂时写死校园热点分类id，以及其下级的所有文章
      },
      errorHandle: true,
      showLoading: true,
    }).then((data) => {
      this.articleClassList = this.articleClassList.concat(data)
    })
  },
  methods: {
    getShowImage,
    async resetPaginationAndLoadData() {
      this.pagination.current = 1
      this.list = []
      await this.loadData()
    },
    async loadData() {
      if (this.loadMoreStatusText === "loading") {
        return
      }
      this.loadMoreStatusText = "loading"
      const data = await request({
        url: "inforArticlesFavorites/getUserFavoritesByClient",
        data: {
          ...this.pagination,
          articlesClassId: this.currentArticleClassId,
        },
        errorHandle: true,
      })
      this.list.push(...data.records)
      //检查是否有下一页
      if (this.list.length >= data.total) {
        this.loadMoreStatusText = "noMore"
      } else {
        this.loadMoreStatusText = "more"
      }
    },
    reachBottom() {
      if (this.loadMoreStatusText === "noMore" || this.loadMoreStatusText === "loading") {
        return
      }
      this.pagination.current++
      this.loadData()
    },
    pullDownRefresh() {},
    // 取消收藏
    async cancelCollection(item, index) {
      if (
        !(await showModal({
          title: "警告",
          content: "确定要将该文章从收藏列表中移除吗？",
        }))
      ) {
        return
      }
      await request({
        url: "inforArticlesFavorites/del",
        data: {
          ids: [item.favoritesId],
        },
        errorHandle: true,
      })
      this.list.splice(index, 1)
      showToast.default("取消收藏成功")
    },
    //资讯文章点击
    articleClick(item) {
      //获取资讯文章详情（统计阅读量）
      request({
        url: "inforArticles/getArticlesDetails",
        data: {
          articlesId: item.articlesId,
        },
        errorHandle: true,
        showLoading: true,
      }).then((data) => {
        //跳转到外部的地址
        if (item.linkType === "EXTERNAL") {
          uni.navigateTo({
            url: handleUrlParams("/pages/web-view/web-view", {
              path: encodeURIComponent(item.linkUrl),
            }),
          })
          //跳转到内部的详情页
        } else if (item.linkType === "NONE") {
          uni.navigateTo({
            url: handleUrlParams("/pages/examPreparationTips/detail", {
              articlesId: item.articlesId,
            }),
          })
        }
      })
    },
  },
}
</script>

<template>
  <view class="component">
    <!--		资讯文章分类列表-->
    <view class="article-class-list">
      <view
        class="item"
        :class="{ active: currentArticleClassId === item.articlesClassId }"
        v-for="(item, index) in articleClassList"
        :key="index"
        @click="
          () => {
            currentArticleClassId = item.articlesClassId
            resetPaginationAndLoadData()
          }
        "
        >{{ item.articlesClassName }}</view
      >
    </view>

    <view class="list" v-if="list.length > 0">
      <view class="item" v-for="(item, index) in list" :key="index" @click="() => articleClick(item)">
        <view class="content">
          <!--				文章图标-->
          <image class="icon" :src="getShowImage(item.articlesIcon)"></image>

          <view class="right">
            <view class="top">
              <!--							文章标题-->
              <view class="article-title">{{ item.articlesTitle }}</view>
              <!--							发布时间-->
              <view class="release-date">{{ item.publishTime }}</view>
            </view>
            <view class="bottom">
              <!--							阅读数量-->
              <view class="reading-count">
                <text class="count">{{ item.readingValue }}</text>
                <text>人阅读</text>
              </view>
              <!--							文章分类-->
              <view class="article-class-name">#{{ item.articlesClassName }}</view>
            </view>
          </view>
        </view>

        <view class="divider-line"></view>

        <view class="footer">
          <view class="btn primary">前往阅读</view>
          <view class="btn danger" @click.stop="cancelCollection(item, index)">取消收藏</view>
        </view>
      </view>
      <!--		加载下一页-->
      <uni-load-more :status="loadMoreStatusText"></uni-load-more>
    </view>
    <empty v-else height="calc(100vh - 100rpx)"></empty>
  </view>
</template>

<style scoped lang="scss">
.article-class-list {
  display: flex;
  overflow-x: auto;
  padding-top: 20rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  > .item {
    margin-right: 20rpx;
    padding: 5rpx 20rpx;
    border-radius: 27rpx;
    min-width: max-content;
		background: var(--background-color);
    &.active {
      background: var(--theme-color);
      color: white;
    }
  }
}

.list {
  padding-left: 30rpx;
  padding-right: 30rpx;
  > .item {
    background: white;
    border-radius: 30rpx;
    padding: 30rpx;
    margin-top: 30rpx;
    > .content {
      display: flex;
      > .icon {
        width: 180rpx;
        height: 160rpx;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
      }
      > .right {
        margin-left: 30rpx;
        flex: 1;
        width: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        > .top {
          .article-title {
            font-size: 32rpx;
            //最多两行，文本溢出部分显示省略号
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .release-date {
            font-size: 30rpx;
            color: var(--text-color-light);
            margin-top: 10rpx;
          }
        }
        > .bottom {
          margin-top: 20rpx;
          display: flex;
          font-size: 30rpx;
          > .reading-count {
            color: var(--text-color-light);
            > .count {
              color: #a77e00;
            }
          }
          > .article-class-name {
            margin-left: 30rpx;
            color: #4dc47c;
          }
        }
      }
    }
    > .divider-line {
      height: 2rpx;
      background: var(--border-color);
      margin: 20rpx 0;
    }
    > .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;

      > .btn {
        font-size: 30rpx;
        height: 60rpx;
        line-height: 60rpx;
        padding: 0 40rpx;
        border-radius: 30rpx;

        &.primary {
          background: var(--theme-color);
          color: white;
        }

        &.info {
          background: var(--gray-background-color);
          border: 2rpx solid var(--border-color);
        }

        &.danger {
          background: #c0392b;
          color: white;
        }
      }
    }
  }
}
</style>
